<template>
    <div class="qilin-QilinCollapse">
        <el-collapse
            :accordion="ownCollapseConfig.accordion || true"
        >
            <template v-for="(item,index) in ownCollapseConfig.itemConfig">
                <el-collapse-item
                    :key="index"
                >
                    <template slot="title">
                        <span></span>
                        <span>{{item.text}}</span>
                        <span>{{item.expression}}</span>
                    </template>
                    <div>{{item.subText}}</div>
                    <div v-if="!!item.description">{{item.description}}</div>
                    <slot name="code" :data="item.codeValue"></slot>
                </el-collapse-item>
            </template>
        </el-collapse>
    </div>
</template>
<script>
import CodeMirror from "@/components/CodeMirror.vue";
export default {
    props:{
        collapseConfig:{
            type:Object
        }
    },
    components: {
        CodeMirror
    },
    data(){
        return {
            ownCollapseConfig:{
                // el-collapse标签上的配置项
                elCollapseConfig:{
                    accordion:true //是否开启手提琴模式
                },
                itemConfig:[]
            }
        }
    },
    watch:{
        collapseConfig:{
            handler(newValue,oldValue){
                this.initOwnCollapseConfig(newValue);
            },
            deep:true,
            immediate:true
        }
    },
    methods:{
        initOwnCollapseConfig(target){
            this.ownCollapseConfig=this.$QilinUtils.deepCopy(target,this.ownCollapseConfig);
        }
    }
}
</script>
<style lang="less" scoped>
.qilin-QilinCollapse{
    >.el-collapse{
        ::v-deep .el-collapse-item__header {
            font-size:@size-text-default !important;
            padding: @rem5 0;
            cursor: pointer;
            > span:nth-of-type(1) {
                .EDGQilinWH(@rem5,@rem5);
                display: inline-block;
                border-radius: @radius-circle;
                background-color: @color-text-title;
                vertical-align: middle;
                margin: @rem5 @rem5 @rem10 @rem5;
            }
            > span:nth-of-type(2) {
                color: @color-text-title;
                font-weight: bold;
            }
            > span:nth-of-type(3) {
                color: @color-text-common;
            }
        }
    }
}
</style>